<template>
  <div class="my">
    <div v-show="ish">
      <div class="title">
        <h2>我的详情</h2>
      </div>
      <div class="my_box">
        <div class="my_name">
          <h1>{{ myName }}</h1>
        </div>
        <div class="myList">
          <div @click="goattention">我的关注：{{ collectlistLength }}</div>
        </div>
        <div class="my_tou">
          <div class="tou_img">
            <img class="aout_img" src="../assets/tou_img.webp" alt="" />
          </div>
        </div>
      </div>
      <div class="brief">
        <p>个人简介</p>
        <textarea
          class="nav"
          v-model="navtext"
          placeholder="这个作者很懒,什么都没留下......"
        ></textarea>
      </div>

      <div class="box_bottom">
        <div class="issue" @click="btnaddissue">
          <van-icon class="add" name="add-o" size="0.5rem" />发布菜谱
        </div>

        <div class="caipu" v-if="mylist.length != 0"></div>
        <div>
          <van-empty
            v-if="mylist.length == 0"
            description="作者很懒，暂时没发布菜谱"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      myName: "",
      collectlistLength: 0,
      mylist: [],
      ish: false,
      navtext: "",
    };
  },

  methods: {
    btnaddissue() {
      this.$router.push({ name: "issue" });
    },

    getcode() {
      let getuser = localStorage.getItem("codeok");
      if (!getuser) {
        this.$router.push({ name: "register" });
      } else {
        this.ish = true;
      }
    },

    // 跳转我的关注页面
    goattention() {
      this.$router.push({ name: "attentionlist" });
    },

    getName() {
      let loginUserlist = JSON.parse(localStorage.getItem("loginUserlist"));

      let attentionlist = JSON.parse(localStorage.getItem("attentionlist"));
      // console.log(attentionlist);
      // console.log(attentionlist.length);

      if (!attentionlist) {
        this.collectlistLength = 0;
      } else {
        this.collectlistLength = attentionlist.length;
      }

      if (!loginUserlist) {
        return;
      } else {
        this.myName = loginUserlist[0].nickName;
      }
    },
  },
  created() {
    this.getcode();
    this.getName();
  },
};
</script>

<style lang="less" scoped>
.my {
  width: 100%;
  height: 100%;
  .title {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 15px;
    border-bottom: 1px solid #ccc;
  }
  width: 100%;
  height: 100%;
  .my_box {
    position: relative;
    width: 100%;
    height: 120px;
    background-color: #feca2d;
    display: flex;
    justify-content: space-evenly;

    .my_name {
      width: 50%;
      height: 100%;
      padding-left: 10%;
      line-height: 100px;
    }
    .myList {
      position: absolute;
      width: 230px;
      height: 25px;
      bottom: 0;
      left: 15px;
      line-height: 25px;
      display: flex;
      justify-content: space-evenly;
      span {
        display: block;
      }
    }
    .my_tou {
      width: 30%;
      height: 100%;

      .tou_img {
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        height: 100px;
        border-radius: 50%;

        overflow: hidden;
      }
    }
  }
  .brief {
    width: 100%;
    min-height: 150px;
    // padding: 0 10%;
    // background-color: aqua;
    p {
      font-size: 0.5rem;
      margin-left: 15px;
    }
    .nav {
      width: 100%;
      height: 150px;
      border: transparent;
      background-color: rgb(243, 243, 243);
      font-size: 0.4rem;
      resize: none;
    }
  }
  .box_bottom {
    width: 100%;
    min-height: 250px;
    //   background-color: pink;
    .issue {
      position: fixed;
      margin: 15px 0;
      width: 100%;
      height: 30px;
      bottom: 50px;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      background-color: #feca2d;
      .add {
        left: 39%;
        position: absolute;
        top: 6px;
      }
    }
    .caipu {
      width: 100%;
      height: 300px;
      background-color: pink;
    }
  }
}
.aout_img {
  width: 100%;
  display: block;
}
</style>